<script setup lang="ts">
import SvgIcon from "@/components/common/SvgIcon.vue";
import {webInfoStore} from "@/store";
import MyRunTime from "@/components/MyRunTime.vue";
import day from "@/utils/dateUtils.ts";
const webInfo = webInfoStore()
</script>

<template>
  <div class="web-site-info">
    <div class="web-site-info-title">
      网站信息
    </div>
    <div class="web-site-info-content-item">
      <ul>
        <li>
          <span><SvgIcon class-name="icon" :icon-class="webInfo.system.toLowerCase().includes('linux')?'linux':'windows'" />
          部署的系统：</span>
          <span>{{ webInfo.system }}</span>
        </li>
        <li>
          <span><SvgIcon class-name="icon" icon-class="查看" />
          网站访问量:</span>
          <span>{{ webInfo.statistics.visitCount }}</span>
        </li>
        <li>
          <span><SvgIcon class-name="icon" icon-class="文章" />
          网站文章总数:</span>
          <span>{{ webInfo.statistics.articleCount }}</span>
        </li>
        <li>
          <span><SvgIcon class-name="icon" icon-class="字数" />
          网站字数:</span>
          <span>{{ webInfo.statistics.wordCount }}</span>
        </li>
        <li>
          <span><SvgIcon class-name="icon" icon-class="clock" />
          网站运行时长:</span>
          <span><MyRunTime/></span>
        </li>
        <li>
          <span><SvgIcon class-name="icon" icon-class="日历" />
          网站最后更新时间:</span>
          <span>{{ day(webInfo.getDeployTime).format('YYYY年MM月DD日') }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<style scoped lang="less">
.web-site-info{
  margin-top: 16px;
  background: #ffffff;
  padding: 24px;
  border-radius: 8px;
  .web-site-info-title {
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 4px;
    color: #18191C;
  }
  .web-site-info-content-item {
    margin-top: 16px;
    ul {
      display: flex; /* 使用弹性布局 */
      flex-direction: column;
      list-style: none; /* 移除列表样式 */
      padding: 0;
      margin: 0;
      li {
        display: flex;
        justify-content: space-between;
        margin-top: 16px;
        .icon{
          width: 16px;
          height: 16px;
          margin-right: 2px;
        }
        span {
          display: flex;
          align-items: center;
          font-size: 14px;
          color: #666666;
        }
      }
    }
  }
}
</style>
